<template>
  <el-dialog  title="详情" :fullscreen="true" :visible.sync="visible">
    <div>
      <el-row :gutter="5">
        <el-col :span="3">
          <el-select v-model="formData.prodName" placeholder="请选择产品">
            <el-option v-for="option in prodOptions" :key="option.value" :label="option.label" :value="option.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addNewRow()">新增</el-button>
        </el-col>
        <el-col :span="2">
          <el-input v-model="addNewRowNum" placeholder="行"></el-input>
        </el-col>
        <el-col :span="1">
          行
        </el-col>
      </el-row>


    </div>
    <div style="padding: 10px 10px;">
      <el-row :gutter="5">
        <el-col :span="1"><div class="grid-content bg-purple">序号</div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple">一级模块</div></el-col>
        <el-col :span="7"><div class="grid-content bg-purple">需求</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple">负责人</div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple">开始日期</div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple">结束日期</div></el-col>
        <el-col :span="2"><div class="grid-content bg-purple">计划天数</div></el-col>
        <el-col :span="3"><div class="grid-content bg-purple">操作</div></el-col>
      </el-row>
      <div v-for="(item, index) in taskList">
        <el-row :gutter="5" style="border-bottom: 1px solid #f1f1f1;">
          <el-col :span="1">
            <el-input v-model="item.seqNo" placeholder="序号" :disabled="true"></el-input>
          </el-col>
          <el-col :span="3">
            <el-input v-model="item.moudleName" placeholder="请输入一级模块"></el-input>
          </el-col>
          <el-col :span="7">
            <el-input v-model="item.taskName" placeholder="请输入需求"></el-input>
          </el-col>
          <el-col :span="2">
            <el-input v-model="item.userName" placeholder="负责人,为空默认同上"></el-input>
          </el-col>
          <el-col :span="3">
            <el-date-picker v-model="item.startDate" type="date" placeholder="开始日期" @change="changeStartDate()">
            </el-date-picker>
          </el-col>
          <el-col :span="3">
            <el-date-picker v-model="item.endDate" type="date" placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2">
            <el-input v-model="item.planDays" placeholder="计划天数"></el-input>
          </el-col>
          <el-col :span="3" style="text-align: center;padding: 5px 0px;">
            <el-button type="primary" size="mini" @click="moveItemUp(item)">上移</el-button>
            <el-button type="primary" size="mini" @click="moveItemDown(item)">下移</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'addTesk',
    data () {
      return {
        formData: {
          seqNo: '',
          prodName: '',
          formName: '',
          tableName: '',
          formId: '',
          moudleName: '',
          appId: ''
        },
        taskList: [],
        taskItem: {
          seqNo: '',
          prodName: '',
          moudleName: '',
          taskName: '',
          userName: '',
          startDate: '',
          endDate: '',
          planDays: ''
        },
        active: 0,
        addNewRowNum: 1,
        visible: false,
        loading: false,
        appOptions: [],
        formLayouts: [],
        prodOptions: [{
          value: '资产管理',
          label: '资产管理'
        }, {
          value: '投资管理系统',
          label: '投资管理系统'
        }, {
          value: '人力资源管理系统',
          label: '人力资源管理系统'
        }]
      }
    },
    activated () {
      this.init()
    },
    methods: {
      init (id) {
        console.log(id)
        this.visible = true
        this.$nextTick(() => {
          if (this.formData.formId) {

          };
        })
      },
      onSubmit () {

      },
      getFormInfo (id) {
        // this.$http({
        //   url: this.$http.adornUrl('/form/getFormBaseInfo'),
        //   method: 'post',
        //   params: this.$http.adornParams({
        //     'formId': this.formData.formId
        //   }, false)
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.formLayouts = data.data.formLayoutList
        //     this.formData.appName = data.data.formBase.appName
        //     this.formData.formName = data.data.formBase.formName
        //     this.formData.tableName = data.data.formBase.tableName
        //     this.formData.moudleName = data.data.formBase.moudleName
        //     this.formData.appId = data.data.formBase.appId
        //   }
        // })
      },
      initAppList () {
        // this.$http({
        //   url: this.$http.adornUrl('/app/getAppListByQuery'),
        //   method: 'post',
        //   params: this.$http.adornParams({})
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.appOptions = data.data;
        //   }
        // });
      },
      addNewRow () {
        for (let i = 0; i < this.addNewRowNum; i++) {
          console.log(this.taskList)
          let seqNo = this.taskList.length
          let newItem = {
            seqNo: seqNo,
            prodName: '',
            moudleName: '',
            taskName: '',
            userName: '',
            startDate: '',
            endDate: '',
            planDays: '3'
          }
          this.taskList = this.taskList.concat(newItem)
        }
      },
      moveItemUp (item) {
        console.log(item)
        if (item.seqNo === 0) {
          return
        }
        let index1 = item.seqNo
        // let index2 = item.seqNo - 1
        // let prevItem = this.taskList[index2]
        // this.taskList[index2] = this.taskList.splice(index2, 1, this.taskList[index1])[0]
        this.taskList[index1] = this.taskList.splice(index1 - 1, 1, this.taskList[index1])[0]
        this.taskList.forEach((item, index) => {
          item.seqNo = index
        })
      },
      changeStartDate () {
        this.taskList.forEach((item, index) => {
          if (item.startDate !== '' && item.planDays !== '') {
            var planDays = item.planDays
            var seqNo = item.seqNo
            var day = this.$moment(item.startDate).add(planDays, 'days').format('d')
            // var day = this.$moment(item.startDate).format('d')
            if (day > 4) {
              let endDate = this.calcNextWeak(this.$moment(item.startDate).add(1, 'days'))
              item.endDate = endDate
            } else {
              item.endDate = this.$moment(item.startDate).add(planDays, 'days')
            }

            let nextItem = this.taskList[seqNo + 1]
            if (nextItem !== undefined) {
              var nextday2 = this.$moment(item.endDate).add(1, 'days').format('d')
              if (nextday2 > 4) {
                let nextStartDate = this.calcNextWeak(this.$moment(item.endDate))
                nextItem.startDate = nextStartDate
              } else {
                nextItem.startDate = this.$moment(item.endDate).add(1, 'days')
              }
            }
            console.log(day)
          }
        })
      },
      calcNextWeak (date) {
        var day = this.$moment(date).format('d')
        let endDate = date
        if (day > 4) {
          this.calcNextWeak(this.$moment(date).add(1, 'days'))
        }
        return endDate
      },
      moveItemDown (item) {
        console.log(item)
        if (item.seqNo === this.taskList.length - 1) {
          return
        }
        let index1 = item.seqNo
        // let index2 = item.seqNo + 1
        // let nextItem = this.taskList[index2]
        // this.taskList[index2] = this.taskList.splice(index2, 1, this.taskList[index1])[0]
        this.taskList[index1] = this.taskList.splice(index1 + 1, 1, this.taskList[index1])[0]
        this.taskList.forEach((item, index) => {
          item.seqNo = index
        })
      }
    }
  }
</script>

<style scoped>
  .grid-content {
    width: 100%;
    text-align: center;
    background: #e6e6e6;
    padding: 5px 0px;
  }
</style>
